<template>
  <div class="subpage">
    <div class="top">
      <p>为了确保药品准确性,请详细填写药品信息,以便医生准确 开药,同时希望您能上传药品图片。</p>
      <p>示例：药品:阿托伐他汀钙片(阿乐) 规格:10毫克 数量:2盒</p>
    </div>

      <ul class="mid">
        <scroll-view scroll-y='true' style="height: 100%"  :scroll-top='scrollTop' :scroll-with-animation='true'>
        <li v-for="(item, index) in drugList" :key="index" @touchstart="touchStart($event, index)">
          <div class="item">
            <div>药品名称</div>
            <input placeholder="请输入药品名称" class="nowrap" v-model.trim="item.name"/>
          </div>
          <div  class="item">
            <div>药品规格</div>
            <input placeholder="如10mg/粒/颗/毫克" class="nowrap" v-model.trim="item.sku"/>
          </div>
          <div  class="item">
            <div>药品数量</div>
            <input placeholder="如2盒/瓶/袋/包" class="nowrap" v-model.trim="item.num"/>
          </div>
          <div class="doDiv">
            <div class="addDrugDiv fl" @click="addDrugObj" v-if="index == drugList.length - 1">
              <img class="add fl" src="/static/images/addDrug.png"/><span class="fl" style="line-height: 40rpx; font-weight: 400">添加药品</span>
            </div>
            <div class="addDrugDiv fr" @click="deleteDrug(index)">
              <img class="delete fl" src="/static/images/deleteDrug.png"/><span class="fl" style="line-height: 50rpx; font-weight: 400">删除</span>
            </div>
          </div>
        </li>
        </scroll-view>
      </ul>

    <div class="btm">
      <div @click="addDrug">确定</div>
      <div @click="cancelAdd">取消</div>
    </div>
    <i-message id="message" />
    <i-toast id="toast" />
  </div>
</template>
<script>
let app = getApp()
const { $Toast, $Message } = require('../../../../../static/iview/base/index')
export default {
  data () {
    return {
      scrollTop: 0,
      imgUrl: '',
      drugList: [
        {
          name: '',
          sku: '',
          num: '',
          type: 0
        }
      ],
      addObj: {
        name: '',
        sku: '',
        num: '',
        type: 0
      },
      startX: '',
      endX: ''
    }
  },
  onUnload () {
  },
  onLoad () {
    Object.assign(this.$data, this.$options.data())
    this.imgUrl = this.$imgUrl
  },
  onShow () {
    mpvue.getStorage({
      key: 'addDrugList',
      success: (e) => {
        let list = e.data
        console.log(list)
        this.drugList = e.data
        if (list.length > 0) {
          this.drugList = JSON.parse(JSON.stringify(list))
        }
      }
    })
  },
  mounted () {
  },
  methods: {
    deleteDrug (index) {
      this.$set(this.drugList[index], 'type', 0)
      if (this.drugList.length == 1) {
        this.$utils.showToast('text', `至少保留一组药品`)
        return
      }
      this.drugList.splice(index, 1)
    },
    // 滑动开始
    touchStart (e, index) {
      // 获取移动距离，可以通过打印出e，然后分析e的值得出
      this.startX = e.mp.changedTouches[0].clientX
      for (let i = 0; i < this.drugList.length; i++) {
        if (i === index) {
        } else {
          this.$set(this.drugList[i], 'type', 0)
        }
      }
    },
    // 滑动结束
    touchEnd (e, index) {
      // 获取移动距离
      this.endX = e.mp.changedTouches[0].clientX
      if (this.startX - this.endX > 10) {
        for (let i = 0; i < this.drugList.length; i++) {
          this.$set(this.drugList[index], 'type', 0)
        }
        this.$set(this.drugList[index], 'type', 1)
      } else if (this.startX - this.endX < -10) {
        for (let i = 0; i < this.drugList.length; i++) {
          this.$set(this.drugList[i], 'type', 0)
        }
      }
    },
    addDrugObj () {
      if (this.drugList.length == 10) {
        this.$utils.showToast('text', `添加失败,最多可以添加10种药品`)
        return
      }
      let obj = JSON.parse(JSON.stringify(this.addObj))
      this.$set(this.drugList, this.drugList.length, obj)
      this.scrollTop = this.scrollTop + 200
    },
    addDrug () {
      console.log(this.drugList)
      for (let i = 0; i < this.drugList.length; i++) {
        if (!this.drugList[i].name || !this.drugList[i].sku || !this.drugList[i].num) {
          this.$utils.showToast('text', `请完善第${i + 1}组药品名称,药品规格或数量`)
          return
        }
      }
      mpvue.setStorage({
        key: 'addDrugList',
        data: JSON.parse(JSON.stringify(this.drugList)),
        success: function (e) {
          mpvue.navigateBack(1)
        }
      })
    },
    cancelAdd () {
      mpvue.navigateBack(1)
    }
  }
}
</script>
<style scoped lang="less">
.subpage {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #F9F9F9;
  .top {
    padding: 28rpx 27rpx 30rpx 30rpx;
    color: #F13C3C;
    font-size: 28rpx;
    line-height: 40rpx;
  }
  .mid {
    flex: 1;
    overflow-y: auto;
    li {
      background: #fff;
      margin-bottom: 13rpx;
      border-top: 1rpx solid #E9E9E9;
      box-sizing: border-box;
      overflow: hidden;
      .item{
        box-sizing: border-box;
        padding: 0 30rpx 0 38rpx;
        height: 100rpx;
        line-height: 100rpx;
        border-bottom: 1rpx solid #E9E9E9;
        display: flex;
        input {
          height: 100rpx;
          line-height: 100rpx;
          flex: 1;
          text-align: right;
          margin-left: 30rpx;
        }
      }
      .doDiv {
        height: 100rpx;
        padding: 0 30rpx 0 38rpx;
        border-bottom: 1rpx solid #E9E9E9;
      }
    }
    .addDrugDiv {
      display: inline-block;
      margin-top: 24rpx;
      font-size: 32rpx;
      color: #4B7AEA;
      font-weight: bold;
      .add {
        width: 40rpx;
        height: 40rpx;
        float: left;
        margin-right: 14rpx;
      }
      .delete {
        width: 50rpx;
        height: 50rpx;
        float: left;
        margin-right: 3rpx;
      }
    }
  }
  .btm {
    height: 120rpx;
    display: flex;
    margin: 0 30rpx;
    div {
      flex: 1;
      height: 90rpx;
      line-height: 90rpx;
      font-size: 36rpx;
      color: #666;
      border-radius: 4rpx;
      border: 1rpx solid #CCCCCC;
      text-align: center;
      background: #fff;
    }
    div:nth-child(1) {
      background: linear-gradient(90deg, #557DF5 0%, #3F4ADE 100%);
      color: #fff;
      margin-right: 30rpx;
      border: none;
    }
  }
}
</style>
